<template>
  <div class="plant-detail-root">
    <div class="go-back-btn">
      <el-button round @click="goBack" size="mini" icon="el-icon-back">返回</el-button>
    </div>
    <div class="detail-item">
      <item-card title="播种情况" :default-content-visible="true">
        <bzqk :mid="mid"></bzqk>
      </item-card>
    </div>
    <div class="detail-item">
      <item-card title="物候期">
        <whq :mid="mid"></whq>
      </item-card>
    </div>
    <div class="detail-item">
      <item-card title="施底肥情况">
        <sdf :mid="mid"></sdf>
      </item-card>
    </div>

    <div class="detail-item">
      <item-card title="浇水情况">
        <jsqk :mid="mid"></jsqk>
      </item-card>
    </div>
    <div class="detail-item">
      <item-card title="除草情况">
        <ccqk :mid="mid"></ccqk>
      </item-card>
    </div>
    <div class="detail-item">
      <item-card title="追肥情况">
        <zfqk :mid="mid"></zfqk>
      </item-card>
    </div>
    <div class="detail-item">
      <item-card title="病虫害防治">
        <bzhfz :mid="mid"></bzhfz>
      </item-card>
    </div>

    <div class="detail-item">
      <item-card title="采收情况">
        <csqk :mid="mid"></csqk>
      </item-card>
    </div>

    <div class="detail-item">
      <item-card title="晾晒情况">
        <lsqk :mid="mid"></lsqk>
      </item-card>
    </div>

    <div class="detail-item">
      <item-card title="转入加工中心情况">
        <zrjgzx :mid="mid"></zrjgzx>
      </item-card>
    </div>

    <div class="detail-item">
      <item-card title="建成情况">
        <jcqk :mid="mid"></jcqk>
      </item-card>
    </div>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import itemCard from './components/itemCard'
  import itemTable from './components/itemTable'
  import whq from './whq'
  import sdf from './sdf'
  import jsqk from './jsqk'
  import bzqk from './bzqk'
  import ccqk from './ccqk'
  import zfqk from './zfqk'
  import bzhfz from './bchfz'
  import csqk from './csqk'
  import lsqk from './lsqk'
  import zrjgzx from './zrjgzx'
  import jcqk from './jcqk'
  import router from '@/router'

  export default {
    name: 'plant-detail',
    components: {
      jcqk,
      lsqk,
      csqk,
      bzhfz,
      zfqk,
      bzqk,
      sdf,
      whq,
      jsqk,
      ccqk,
      itemTable,
      itemCard,
      zrjgzx
    },

    setup(props, content) {
      let { history: { current: { query: { id, baseId } } } } = router

      let data = reactive({
        mid: id,
        baseId
      })
      const goBack = () => {
        router.push({
          path: '/cpf', query: { baseId: data.baseId }
        })
      }
      return { ...toRefs(data), goBack }
    }
  }
</script>

<style scoped lang="scss">
  .plant-detail-root {
    width: 100%;
    height: 100%;
    padding: 10px 10px;

    .go-back-btn {
      padding: 0px 5px 10px 5px;
    }

    .detail-item {
      margin-bottom: 20px;
    }
  }
</style>
